<template>
  <div class="category-box" @click="goGame(gameItem.giId)">
    <div class="category-topimg">
      <img :src="gameItem.giLogo" alt="" />
    </div>

    <div class="category-bottom">
      <div class="cgame-name">{{ gameItem.giName }}</div>
      <div class="category-xing">
        <div>
          <img
            v-for="items in xing"
            src="../../../assets/img/xingsvg.svg"
            alt=""
            :key="items"
          />
        </div>
        <div>
          <img
            v-for="items in nxing"
            src="../../../assets/img/nxing.svg"
            alt=""
            :key="items"
          />
        </div>

        <span>{{ gameItem.giScore }}</span>
      </div>
      <div class="bossd">
        <div>{{ gameItem.gtName }}</div>
        <div>查看</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryItemComp",
  props: {
    gameItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      xing: "",
      nxing: "",
    };
  },
  created() {
    this.getXing();
  },
  methods: {
    getXing() {
      if (this.gameItem.giScore >= 8) {
        this.xing = 4;
        this.nxing = 1;
      } else if (this.gameItem.giScore >= 6) {
        this.xing = 3;
        this.nxing = 2;
      } else if (this.gameItem.giScore >= 4) {
        this.xing = 2;
        this.nxing = 3;
      } else if (this.gameItem.giScore >= 2) {
        this.xing = 1;
        this.nxing = 4;
      } else {
        this.xing = 0;
        this.nxing = 5;
      }
    },

    goGame(id) {
      this.$router.push({ name: "详情", params: { id: id } });
    },
  },
};
</script>

<style>
</style>